<template>
  <view class="cs-card">
    <wd-card>
      <template #title>
        <wd-row>
          <wd-col :span="12"><wd-text :text="curTypeData.title" /></wd-col>
          <wd-col :offset="8" :span="4">
            <wd-button type="success" size="small" @click="changeDataType">
              {{ curTypeData.extra }}
            </wd-button>
          </wd-col>
        </wd-row>
      </template>
      <view class="uni-body">
        <uni-row>
          <wd-count-to
            color="#1e9fff"
            prefix="￥"
            :fontSize="32"
            :duration="500"
            :end-val="curTypeData.count"
            :useEasing="false"
          />
        </uni-row>
      </view>

      <template #footer>
        <view class="centered">
          <wd-button size="medium" block @click="addNew">{{ curTypeData.addNew }}</wd-button>
        </view>
      </template>
    </wd-card>
  </view>
</template>

<script setup lang="ts">
import { computed, ref, watch, type CSSProperties, reactive } from 'vue'

const btnStyle: CSSProperties = {
  fontSize: '12rpx',
}

const addBtnStyle: CSSProperties = {
  width: '80VW',
}

const { dataType = 'bill' } = defineProps<{
  dataType?: 'bill' | 'assets'
  data?: {
    title: string
    count: number
  }
}>()

defineEmits<{
  click: [type: 'title' | 'content']
}>()

const curDataType = ref(dataType)

const curData = reactive({
  bill: {
    title: '本月支出(元)',
    count: 300,
    extra: '资产',
    addNew: '记一笔',
  },
  assets: {
    title: '净资产(元)',
    count: 0,
    extra: '账单',
    addNew: '添加资产',
  },
})

const curTypeData = computed(() => curData[curDataType.value])

const changeDataType = () => {
  curDataType.value = curDataType.value === 'bill' ? 'assets' : 'bill'
}

const addNew = () => {
  console.log('add new')
  uni.navigateTo({
    url: '/pages/add-bill/index',
  })
}

watch(curDataType, (newDataType) => {})
</script>

<style lang="scss" scoped>
.cs-card {
  width: 100vw;
}

.add-container {
  margin-top: 10px;
}

.centered {
  display: flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
}
</style>
